iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 22
0

官方範例

import React, {useEffect, useRef} from 'react'

export default function App() {
 const inref = useRef(0)

 useEffect(()=>{
  inref.current.focus()
 },[])

  return (
    <div>
      <input ref={inref} type='text' />
    </div>
  );
}

這邊是說當ref有觸發時,input會被focus

也就是說useRef 他是拿來當作DOM的工具,非常很方便

在寫一個範例


import React, {useState,useEffect, useRef} from 'react'


export default function App() {
 const [name , setName] = useState('')
 const inref = useRef(0)

 useEffect(()=>{
  // inref.current.focus()
  inref.current = inref.current +1
 })

  return (
    <div>
      <input value={name} onChange={(e)=>setName(e.target.value)} />
    <div>{name}</div>
    <div>打了{inref.current}字元</div>
    </div>
  );
}

https://ithelp.ithome.com.tw/upload/images/20200922/20110292M8pq9vNCJ9.png

一個簡單的點擊事件


import React, {useEffect, useRef} from 'react'

export default function App() {

 const inref = useRef()

 function click(){
   inref.current.innerHTML = '123456'
 }

  return (
    <div>
      <div ref={inref}></div>
    <button onClick={click}>點我</button>

    </div>
  );
}

https://ithelp.ithome.com.tw/upload/images/20200922/2011029237wxkNRHdo.png


上一篇
day 21 Hook中的props(useContext - 3
下一篇
day 23 嘗試用目前學到的寫一個useHover
系列文
react.js 的學習筆記 (沒在用硬要學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言